<template>
  <h3>值绑定</h3>
  <p>{{ msg }}</p>
  <p>{{ hello }}</p>
  <div v-bind:class="dyclass" v-bind:id="dyid">你好</div>
  <h3>条件1渲染</h3>
  <div v-if="flag">你能看见我吗？</div>
  <div v-else>否的情况</div>
  <h3>条件2渲染</h3>
  <div v-if="type === 'A'">显示A</div>
  <div v-else-if="type === 'B'">显示B</div>
  <div v-else>其他</div>
  <h3>v-show</h3>
  <div v-show="flag">v-show演示</div>
  <h3>列表渲染</h3>
  <p v-for="(name, index) in names" :key="index">{{ name }}</p>
  <h3>对象渲染</h3>
  <p v-for="(value, key, index) in obj" v-bind:key="index">{{ key }}-{{ value }}</p>
</template>


<script>
  export default{
    data(){
      return{
        msg:"hello,world",
        hello: "hi",
        dyid: "appid",
        dyclass: "appclass",
        flag:true,
        type: "C",
        names: ["小明","诸葛亮","刘备"],
        obj: {
          user: "小明",
          age: 20,
          sex: "男"
        }
      }
    }
  }
</script>


<style>
  .appclass{
    color: red;
    font-size: 30px;
  }
</style>